<template>
    <view class="container">
        <view class="header-wrap">
            <text class="txt-white-255 txt-w-6 txt-32 flex-1">银行</text>
            <text class="txt-white-255 txt-w-6 txt-32 flex-1">1个月</text>
            <text class="txt-white-255 txt-w-6 txt-32 flex-1">3个月</text>
            <text class="txt-white-255 txt-w-6 txt-32 flex-1">6个月</text>
        </view>
        <scroll-view scroll-y class="scroll">
            <view class="item-row" v-for="(item, index) in rateList" :key="index">
                <text class="txt-black-34 txt-24 flex-1">{{ item.name }}</text>
                <text class="txt-black-34 txt-24 flex-1" v-for="(o, i) in item.bankRateReps" :key="i">{{ o.saveRate
                    }}%</text>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { fetchBankRateAllList } from '@/services/bank'
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const rateList = ref([]);
onLoad(() => {
    getBankRateAllList();
})

const getBankRateAllList = async () => {
    const { msg, status, data } = await fetchBankRateAllList();
    if (status === 1) {
        rateList.value = (data || []).reduce((m, o) => {
            const bankRateReps = o.bankRateReps.filter(item => (item.saveDate == '一个月' || item.saveDate == '三个月' || item.saveDate == '六个月'))
            m.push({ ...o, bankRateReps })
            return m;
        }, [])
    } else {
        showToast(msg || '获取数据失败')
    }
}
</script>

<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: white;

    .header-wrap {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100rpx;
        background: rgba(14, 183, 105, 1);
        padding-left: 30rpx;
        box-sizing: border-box;
    }

    .scroll {
        width: 100vh;
        flex: 1;

        .item-row {
            display: flex;
            align-items: center;
            width: 100%;
            height: 80rpx;
            padding-left: 30rpx;
            box-sizing: border-box;

            &:nth-child(2n) {
                background-color: rgba(204, 204, 204, 1);
            }
        }
    }
}
</style>